<template>
  <footer class="footer">
    <div class="footer-content">
      <img src="https://internlm.intern-ai.org.cn/svg/logo_blue.23eaf34d.svg" alt="InternLM Logo" class="footer-logo">
      <p>&copy; 2024 熊. All rights reserved.</p>
      <div class="visitor-count">
        访问量: {{ visitCount }}
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const visitCount = ref(0);

onMounted(async () => {
  const response = await fetch('/api/visit_count');
  const data = await response.json();
  visitCount.value = data.visit_count;
});
</script>
<style scoped>
.footer {
  padding: 1rem 2rem;
  background-color: #f5f5f5;
  text-align: right;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.footer-logo {
  height: 24px;
  width: auto;
}

.visitor-count {
  font-size: 0.9rem;
  color: #666;
}
</style>